$hollowColor:#DEE4EE;
$Color:rgba(70, 76, 91, .9);


[rx-placement^=top] .rx-arrow-content{
  padding: 5px 0 8px
}

[rx-placement^=right] .rx-arrow-content{
  padding: 0 5px 0 8px
}

[rx-placement^=bottom] .rx-arrow-content{
  padding: 8px 0 5px
}

[rx-placement^=left] .rx-arrow-content{
  padding: 0 8px 0 5px
}
.rx-arrow-content{
  position: relative;
}
.rx-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;

  &.hollow::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }
}
[rx-placement^=top] .rx-arrow {
  bottom: 4px;
  border-width: 5px 5px 0;
  border-top-color: $Color;

  &.hollow{
    border-top-color: $hollowColor;

    &::after{
      border-width: 5px 5px 0;
      border-top-color:#fff;
    }
  }
}

[rx-placement=top] .rx-arrow {
  left: 50%;
  margin-left: -5px;
  &.hollow::after{
    top: -6px;
    left: -5px;
  }
}

[rx-placement=top-start] .rx-arrow {
  left: 16px;

  &.hollow::after{
    top: -6px;
    left: -5px;
  }
}

[rx-placement=top-end] .rx-arrow {
  right: 16px;
  &.hollow::after{
    top: -6px;
    left: -5px;
  }
}

[rx-placement^=right] .rx-arrow {
  left: 3px;
  border-width: 5px 5px 5px 0;
  border-right-color: $Color;

  &.hollow{
    border-right-color: $hollowColor
  }
}

[rx-placement=right] .rx-arrow {
  top: 50%;
  margin-top: -5px
}

[rx-placement=right-start] .rx-arrow {
  top: 8px
}

[rx-placement=right-end] .rx-arrow {
  bottom: 8px
}

[rx-placement^=left] .rx-arrow {
  right: 3px;
  border-width: 5px 0 5px 5px;
  border-left-color: $Color;

  &.hollow{
    border-left-color: $hollowColor
  }
}

[rx-placement=left] .rx-arrow {
  top: 50%;
  margin-top: -5px
}

[rx-placement=left-start] .rx-arrow {
  top: 8px
}

[rx-placement=left-end] .rx-arrow {
  bottom: 8px
}

[rx-placement^=bottom] .rx-arrow {
  top: 3px;
  border-width: 0 5px 5px;
  border-bottom-color: $Color;


  &.hollow{
    border-bottom-color: $hollowColor;

    &::after{
      top: 1px;
      border-width: 0 5px 5px;
      border-bottom-color: #fff;
    }
  }
}

[rx-placement=bottom] .rx-arrow {
  left: 50%;
  margin-left: -5px;

  &.hollow::after{
    left: 50%;
    margin-left: -5px;
  }
}

[rx-placement=bottom-start] .rx-arrow {
  left: 16px;

  &.hollow::after{
    top: 1px;
    left: -5px;
  }
}

[rx-placement=bottom-end] .rx-arrow {
  right: 16px;
  &.hollow::after{
    top: 1px;
    left: -5px;
  }
}
.rx-arrow-content.noarrow{
  padding: 0 !important;

  .rx-arrow{
    display: none;
  }
}
